<template>
  <div class="app">
    <div class="header-box">
      <van-icon name="arrow-left" size="24" @click="goBack" />
      <div class="header-item">
        {{ userInfo.regStatus == 4 ? "资料修改" : "商户入网" }}
      </div>
      <!-- <van-icon name="arrow-left"
                size="24"
      style="visibility: hidden;" />-->
      <span class="header-save" @click="noSave">保存</span>
    </div>
    <div class="content-box">
      <Remarks v-if="userInfo.regStatus == 4" :contents="userInfo.remarks" />

      <!-- 步骤条 -->
      <Steps
        :dataSource="[
          { name: '1基本信息', checked: true },
          { name: '2结算信息', checked: true },
          { name: '3费率信息' },
          { name: '4附件信息' },
        ]"
      />
      <!-- 主体 -->
      <van-form validate-first input-align="right">
        <van-field
          is-link
          readonly
          v-model="formData.accountTypeText"
          label="账户类型"
          placeholder="请选择"
          @click="showPopup(1)"
        />
        <div class="attach-item" v-if="T1">
          <p class="attach-item-title">开户许可证</p>
          <div class="upload-content">
            <div class="attach-label">
              <p>请上传开户许可证正面图片</p>
              <p class="example" @click="lookExample1(openingImgExample)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
            <van-uploader
              :after-read="uploadOpenPermisionImg"
              :before-delete="deleteOpenPermisionImg"
              v-model="openPermissionList"
              :max-count="1"
              @oversize="onOversize"
            >
              <img src="../../assets/store/opening-img.png" alt />
            </van-uploader>
          </div>
        </div>
        <van-field
          v-if="T1"
          v-model="merchantForm.merchantFullName"
          @input="change1"
          disabled
          class="mt-margin"
          label="公户户名"
        />
        <van-field
          v-if="T1"
          v-model="formData.accountNum1"
          @input="change2"
          label="账户号码"
          type="digit"
          placeholder="请输入对公户账户号码"
          :rules="[
            {
              pattern: /\S/,
              message: '请输入账户号码',
              trigger: 'onBlur',
            },
            {
              validator: (val) => {
                if (val.length > 25) {
                  return false;
                } else {
                  return true;
                }
              },
              message: '请输入小于25个字符',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          v-if="T1"
          v-model="formData.checkApproveNo"
          @input="change9"
          placeholder="请输入开户许可证核准号"
          label="核准号(选填)"
          :rules="[
            {
              pattern: /^[0-9a-zA-Z]{1,35}$/,
              message: '请输入字母+数字的随机组合',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          v-if="T1"
          is-link
          readonly
          v-model="formData.bankId1Text"
          label="开户银行"
          placeholder="请选择对公户开户银行名称"
          @click="showPopup(2)"
        />
        <van-field
          v-if="T1"
          is-link
          readonly
          v-model="formData.acconutArea1Text"
          label="开户省市"
          placeholder="请选择省份、城市"
          @click="showPopup(4)"
        />
        <van-field
          v-if="T1"
          is-link
          readonly
          v-model="formData.branchBankId1text"
          label="开户支行"
          placeholder="请选择开户支行"
          @click="selectBranchbank1"
        />
        <van-field
          v-if="T1"
          v-model="formData.accountMobile1"
          @input="change3"
          label="开户手机"
          placeholder="请输入开户手机号码"
          :rules="[
            {
              pattern: /^0?(13|14|15|16|17|18|19)[0-9]{9}$/,
              message: '手机号格式错误',
              trigger: 'onChange',
            },
          ]"
        />
        <div class="attach-item" v-if="T3">
          <p class="attach-item-title">结算人身份证</p>
          <div class="upload-content">
            <div class="upload-item">
              <van-uploader
                :after-read="uploadSettleFontImg"
                :before-delete="deleteSettleFontImg"
                v-model="settleFontList"
                :max-count="1"
                @oversize="onOversize"
              >
                <img src="../../assets/store/idCard-font.png" alt />
              </van-uploader>
              <p>请上传身份证人像面</p>
              <p class="example" @click="lookExample(idFontImgExample)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
            <div class="upload-item">
              <van-uploader
                :after-read="uploadSettleBackImg"
                :before-delete="deleteSettleBackImg"
                v-model="settleBackList"
                :max-count="1"
                @oversize="onOversize"
              >
                <img src="../../assets/store/idCard-back.png" alt />
              </van-uploader>
              <p>请上传身份证国徽面</p>
              <p class="example" @click="lookExample(idBackImgExample)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
          </div>
          <div class="upload-content">
            <div class="upload-item">
              <van-uploader
                :after-read="uploadSettleHandFontImg"
                :before-delete="deleteSettleHandFontImg"
                v-model="settleHandFontList"
                :max-count="1"
                @oversize="onOversize"
              >
                <img src="../../assets/store/idHand-font.png" alt />
              </van-uploader>
              <p>请上传结算人手持身份证照</p>
              <p class="example" @click="lookExample(idHandFontImgExample)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
          </div>
        </div>
        <van-field
          v-if="T3"
          class="mt-margin"
          v-model="formData.settlementName"
          @input="change4"
          label="结算人姓名"
          placeholder="请输入结算人身份证姓名"
          :rules="[
            {
              pattern: /^[\u4E00-\u9fa5a-zA-Z\uf900-\ufa2d·s]{1,50}$/,
              message: '请输入小于50位的中文/字母组合',
            },
          ]"
        />
        <van-field
          v-if="T3"
          v-model="formData.settlementNum"
          @input="change5"
          label="结算人证件号"
          @blur="handlePersonVerify"
          placeholder="请输入结算人身份证号"
          :rules="[
            {
              pattern: /\S/,
              message: '请输入结算人证件号',
              trigger: 'onBlur',
            },
            {
              pattern: /^[0-9a-zA-Z]{1,18}$/,
              message: '请输入18位的数字/字母组合类型',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          v-if="T3"
          is-link
          readonly
          v-model="formData.idCardStartTime"
          label="身份证有效期"
          placeholder="证件开始日期"
          @click="showPopup(6)"
        />
        <van-field
          v-if="T3"
          is-link
          readonly
          v-model="formData.idCardEndTime"
          label
          placeholder="证件结束日期"
          @click="showPopup(7)"
          :rules="[
            {
              validator: ValidateIdCardEndTime,
              message: '结束日期不能小于开始日期',
              trigger: 'onChange',
            },
          ]"
        />
        <div class="attach-item" v-if="T2">
          <p class="attach-item-title">银行卡正面</p>
          <div class="upload-content">
            <div class="attach-label">
              <p>请上传卡号面</p>
              <p class="example" @click="lookExample(bankImgExample)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
            <van-uploader
              :after-read="uploadBankCardImg"
              :before-delete="deleteBankCardImg"
              v-model="bankCardList"
              :max-count="1"
              @oversize="onOversize"
            >
              <img src="../../assets/store/bank-img.png" alt />
            </van-uploader>
          </div>
        </div>
        <div class="attach-item" v-if="T2">
          <p class="attach-item-title">银行卡反面</p>
          <div class="upload-content">
            <div class="attach-label">
              <p>请上传卡反面</p>
              <p class="example" @click="lookExample(bankImg2Example)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
            <van-uploader
              :after-read="uploadBankCard2Img"
              :before-delete="deleteBankCard2Img"
              v-model="bankCard2List"
              :max-count="1"
              @oversize="onOversize"
            >
              <img src="../../assets/store/bank-img2.png" alt />
            </van-uploader>
          </div>
        </div>
        <van-field
          v-if="T2"
          v-model="formData.accountName2"
          @input="change6"
          disabled
          class="mt-margin"
          label="对私户名"
          :placeholder="'请输入' + formData.accountTypeText + '姓名'"
        />
        <van-field
          v-if="T2"
          v-model="formData.accountNum2"
          @input="change7"
          type="digit"
          label="账户号码"
          :placeholder="'请输入' + formData.accountTypeText + '号码'"
          :rules="[
            {
              pattern: /\S/,
              message: '请输入账户号码',
              trigger: 'onBlur',
            },
            {
              validator: (val) => {
                if (val.length > 25) {
                  return false;
                } else {
                  return true;
                }
              },
              message: '请输入小于25个字符',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          v-if="T2"
          is-link
          readonly
          v-model="formData.bankId2Text"
          label="开户银行"
          placeholder="请选择对私户开户银行名称"
          @click="showPopup(3)"
        />
        <van-field
          v-if="T2 && formData.accountType == 1"
          is-link
          readonly
          v-model="formData.acconutArea2Text"
          label="开户省市"
          placeholder="请选择省份、城市"
          @click="showPopup(5)"
        />
        <van-field
          v-if="T2 && formData.accountType == 1"
          is-link
          readonly
          v-model="formData.branchBankId2Text"
          label="开户支行"
          placeholder="请选择开户支行"
          @click="selectBranchbank2"
        />
        <van-field
          v-if="T2"
          v-model="formData.accountMobile2"
          @input="change8"
          label="开户手机"
          placeholder="请输入开户手机号码"
          :rules="[
            {
              pattern: /^0?(13|14|15|16|17|18|19)[0-9]{9}$/,
              message: '手机号格式错误',
              trigger: 'onChange',
            },
          ]"
        />

        <!-- 弹窗内容 -->
        <van-popup v-model="show1" position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="账户类型"
            show-toolbar
            :columns="accountTypies"
            @confirm="selectAccountTyepe"
            @cancel="onCancel(1)"
          />
        </van-popup>
        <van-popup v-model="show2" position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="选择银行"
            show-toolbar
            :columns="bankList"
            @confirm="selectBank1"
            @cancel="onCancel(2)"
          />
        </van-popup>
        <van-popup v-model="show3" position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="选择银行"
            show-toolbar
            :columns="bankList"
            @confirm="selectBank2"
            @cancel="onCancel(3)"
          />
        </van-popup>
        <van-popup v-model="show4" position="bottom" :style="{ height: '40%' }">
          <van-picker
            show-toolbar
            title="请选择地区"
            @change="onAreaChange"
            @cancel="onCancel(4)"
            @confirm="onAreaConfirm1"
            :columns="areaColumns"
          />
        </van-popup>
        <van-popup v-model="show5" position="bottom" :style="{ height: '40%' }">
          <van-picker
            show-toolbar
            title="请选择地区"
            @change="onAreaChange"
            @cancel="onCancel(5)"
            @confirm="onAreaConfirm2"
            :columns="areaColumns"
          />
        </van-popup>
        <van-popup v-model="show6" position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="currentDate1"
            type="date"
            title="开始日期"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="selectTime1"
            @cancel="onCancel(6)"
          />
        </van-popup>
        <van-popup v-model="show7" position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="currentDate2"
            type="date"
            title="结束日期"
            cancel-button-text="长期"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="selectTime2"
            @cancel="longTime"
          />
        </van-popup>

        <van-dialog
          v-model="showExample"
          title="查看示例"
          confirmButtonText="关闭"
          confirmButtonColor="#FFB72F"
        >
          <img :src="exampleImg" class="example-img" />
        </van-dialog>

        <van-dialog
          v-model="showExample1"
          title="查看示例"
          confirmButtonText="关闭"
          confirmButtonColor="#FFB72F"
        >
          <img :src="exampleImg" class="example-img1" />
        </van-dialog>
      </van-form>
      <van-button
        block
        type="info"
        color="#FFB72F"
        :disabled="pass"
        @click="nextStep"
        class="next-step-btn"
        >下一步</van-button
      >
    </div>
  </div>
</template>

<script>
import openingImgExample from "../../assets/store/openingimg-example.jpg";
import idFontImgExample from "../../assets/store/idCard-font-example.png";
import idBackImgExample from "../../assets/store/idCard-back-example.png";
import idHandFontImgExample from "../../assets/store/idHand-font-example.png";
import bankImgExample from "../../assets/store/bank-img-example.png";
import bankImg2Example from "../../assets/store/bank-img2-example.png";
import { uploadImg, bankFontOcr, idCardOcr } from "@/api/upload";
import { getBankList } from "@/api/bank";
import { getAreaData } from "@/api/area";
import { GMTToStr } from "@/utils/tools";
import { imgPreview } from "@/utils/utils.js";
import { save } from "@/api/stores";
import { isBlacklist } from "@/api/merchant";
export default {
  name: "Step2",
  components: {
    HeaderComp: () => import("@/components/HeaderComps"),
    Remarks: () => import("@/components/Remarks"),
    Steps: () => import("@/components/steps"),
  },
  data() {
    return {
      openingImgExample,
      bankImgExample,
      bankImg2Example,
      idFontImgExample,
      idHandFontImgExample,
      idBackImgExample,
      exampleImg: "",
      showExample: false,
      showExample1: false,
      formData: {},
      accountTypies: [
        {
          text: "法人对公",
          value: "1",
          disabled: this.$store.state.merchant.merchantType == 3,
        },
        {
          text: "法人对私",
          value: "2",
        },
        {
          text: "非法人对私",
          value: "3",
          disabled: this.$store.state.merchant.merchantType == 3,
        },
      ],
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      openPermissionList: [],
      settleFontList: [],
      settleBackList: [],
      settleHandFontList: [],
      bankCardList: [],
      bankCard2List: [],
      bankList: [],
      areaColumns: [
        {
          values: [],
          defaultIndex: 0,
        },
        {
          values: [],
          defaultIndex: 0,
        },
        {
          values: [],
          defaultIndex: 0,
        },
      ],
      currentDate1: new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
      ),
      currentDate2: new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
      ),
      minDate: new Date(1971, 0, 1),
      maxDate: new Date(2060, 10, 1),
      T1: true,
      T2: true,
      T3: true,
    };
  },
  computed: {
    privateName() {
      let merchant = this.$store.state.merchant;
      let settlement = this.$store.state.settlement;
      let storeType = this.$store.state.merchant.merchantType;
      let storeAccountType = this.formData.accountType;
      if (storeType == 1 && storeAccountType == 2) {
        return merchant.legalName;
      } else if (storeType == 1 && storeAccountType == 3) {
        return settlement.settlementName;
      } else if (storeType == 2 && storeAccountType == 2) {
        return merchant.legalName;
      } else if (storeType == 2 && storeAccountType == 3) {
        return settlement.settlementName;
      } else if (storeType == 3 && storeAccountType == 2) {
        return merchant.legalName;
      }
    },
    merchantForm() {
      return this.$store.state.merchant;
    },
    settlement() {
      return this.$store.state.settlement;
    },
    userInfo() {
      return this.$store.state.user.userInfo;
    },
    pass() {
      return this.$store.getters.valid_step2;
    },
  },
  watch: {
    formData: {
      handler(newV) {
        let openType = this.merchantForm.openType;
        let storeType = this.merchantForm.merchantType;
        if (
          (storeType == 1 && newV.accountType == 1) ||
          (storeType == 2 && newV.accountType == 1)
        ) {
          this.T1 = true;
          this.T2 = false;
          this.T3 = false;
          this.formData.accountName1 = this.merchantForm.merchantFullName;
          this.$store.commit(
            "ISetAccountName1",
            this.merchantForm.merchantFullName
          );
        } else if (storeType == 1 && newV.accountType == 2) {
          this.T1 = true;
          this.T2 = true;
          this.T3 = false;
          this.formData.accountName1 = this.merchantForm.merchantFullName;
          this.$store.commit(
            "ISetAccountName1",
            this.merchantForm.merchantFullName
          );
          this.formData.accountName2 = this.merchantForm.legalName;
          this.$store.commit("ISetAccountName2", this.merchantForm.legalName);
        } else if (storeType == 1 && newV.accountType == 3) {
          this.T1 = true;
          this.T2 = true;
          this.T3 = true;
          this.formData.accountName1 = this.merchantForm.merchantFullName;
          this.$store.commit(
            "ISetAccountName1",
            this.merchantForm.merchantFullName
          );
          this.formData.accountName2 = this.formData.settlementName;
          this.$store.commit("ISetAccountName2", this.formData.settlementName);
        } else if (storeType == 2 && newV.accountType == 2) {
          this.T1 = false;
          this.T2 = true;
          this.T3 = false;
          this.formData.accountName2 = this.merchantForm.legalName;
          this.$store.commit("ISetAccountName2", this.merchantForm.legalName);
        } else if (storeType == 2 && newV.accountType == 3) {
          this.T1 = false;
          this.T2 = true;
          this.T3 = true;
          this.formData.accountName2 = this.formData.settlementName;
          this.$store.commit("ISetAccountName2", this.formData.settlementName);
        } else if (storeType == 3 && newV.accountType == 2) {
          this.T1 = false;
          this.T2 = true;
          this.T3 = true;
          this.formData.accountName2 = this.formData.settlementName;
          this.$store.commit("ISetAccountName2", this.formData.settlementName);
        }
      },
      deep: true,
    },
  },
  mounted() {
    if (this.settlement.openPermissionImg) {
      this.openPermissionList = [{ url: this.settlement.openPermissionImg }];
    }
    if (this.settlement.settleFontImg) {
      this.settleFontList = [{ url: this.settlement.settleFontImg }];
    }
    if (this.settlement.settleHandFontImg) {
      this.settleHandFontList = [{ url: this.settlement.settleHandFontImg }];
    }
    if (this.settlement.settleBackImg) {
      this.settleBackList = [{ url: this.settlement.settleBackImg }];
    }
    if (this.settlement.bankCardImg) {
      this.bankCardList = [{ url: this.settlement.bankCardImg }];
    }
    if (this.settlement.bankCard2Img) {
      this.bankCard2List = [{ url: this.settlement.bankCard2Img }];
    }
    let form = this.$store.state.settlement;
    let newform = JSON.parse(JSON.stringify(form));
    this.formData = newform;
    this.formData.accountType = this.settlement.acconutType;
    this.getBankLists();
    this.getProvince("00");
    const content = document.querySelector(".content-box");
    content.scrollIntoView(true);
    this.$nextTick(() => {
      window.scrollTo({
        left: 0,
        top: 0,
        behavior: "smooth",
      });
    });
    console.log("mounted");
  },
  methods: {
    noSave() {
      const reg = /^[1-9]\d{3}\/(0[1-9]|1[0-2])\/(0[1-9]|[1,2][0-9]|3[0,1])$/;
      if (this.formData.accountType == 3) {
        if (!reg.test(this.formData.idCardStartTime)) {
          this.$toast({
            message: "身份证开始有效期格式不对，请重新选择",
            duration: 2000,
          });
          return false;
        }
        if (this.formData.idCardEndTime != "88888888") {
          if (!reg.test(this.formData.idCardEndTime)) {
            this.$toast({
              message: "身份证结束有效期格式不对，请重新选择",
              duration: 2000,
            });
            return false;
          }
        }
      }

      this.$dialog
        .confirm({
          title: "商户认证",
          message: `<div style="font-size:16px;line-height:12px;">
                <p>确认是否保存资料？</p> </div>`,
          cancelButtonText: "取消",
          // cancelButtonColor: "#FFB72F",
          confirmButtonText: "确认",
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          // 保存资料
          this.$store.commit("setComplete", 0);
          this.$toast({
            type: "loading",
            message: "正在提交...",
            forbidClick: true,
            duration: 0,
          });
          save(this.$store.state)
            .then((res) => {
              //   document.title = "提交成功";
              this.$toast.clear();
              if (res.code == 200) {
                this.$toast({
                  type: "success",
                  message: "保存成功",
                  duration: 1500,
                });
                this.$store.dispatch("setSaved", true);
              } else {
                this.$toast({
                  message: res.msg || "操作失败",
                  duration: 2000,
                  forbidClick: true,
                });
              }
            })
            .catch((err) => {
              this.$toast.clear();
              document.title = "返回APP";
            });
          // next();
        })
        .catch(() => {
          // 取消
          // document.title = "返回APP";
          // next();
        });
    },
    ValidateIdCardEndTime(val) {
      let startUTC = new Date(this.formData.idCardStartTime).getTime();
      let endtUTC = new Date(val).getTime();
      if (val == "88888888") {
        return true;
      } else if (startUTC > endtUTC) {
        this.$store.commit("setIdCardEndTime", "");
        return false;
      } else {
        return true;
      }
    },
    selectTime1(value) {
      this.formData.idCardStartTime = GMTToStr(value);
      this.$store.commit("setIdCardStartTime", GMTToStr(value));
      this.show6 = false;
    },
    selectTime2(value) {
      this.formData.idCardEndTime = GMTToStr(value);
      this.$store.commit("setIdCardEndTime", GMTToStr(value));
      this.show7 = false;
    },
    longTime(e) {
      this.formData.idCardEndTime = "88888888";
      this.$store.commit("setIdCardEndTime", "88888888");
      this.show7 = false;
    },
    getProvince(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[0].values = areaList;
          this.getCity(areaList[0].code);
        }
      });
    },
    getCity(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[1].values = areaList;
          this.getDistric(areaList[0].code);
        }
      });
    },
    getDistric(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[2].values = areaList;
        }
      });
    },
    //当地区选择变化时
    onAreaChange(picker, values, index) {
      if (index == 0) {
        this.getCity(values[index].code);
      } else if (index == 1) {
        this.getDistric(values[index].code);
      }
    },
    //点击确定
    onAreaConfirm1(value) {
      let province = "";
      let provinceId = "";
      let city = "";
      let cityId = "";
      let district = "";
      let districtId = "";

      if (value[2] && value[2].code) {
        district = value[2].text;
        districtId = value[2].id;
      }
      if (value[1] && value[1].code) {
        city = value[1].text;
        cityId = value[1].id;
      }
      if (value[0] && value[0].code) {
        province = value[0].text;
        provinceId = value[0].id;
      }
      this.$store.commit("setAccountArea1", {
        acconutArea1: [provinceId, cityId, districtId],
        acconutArea1Text: province + city + district,
      });
      this.formData.acconutArea1Text = province + city + district;
      this.$store.commit("setBranchBankId1", {
        bankName: "",
        id: "",
      });
      this.formData.branchBankId1text = "";
      this.show4 = false;
    },
    onAreaConfirm2(value) {
      let province = "";
      let provinceId = "";
      let city = "";
      let cityId = "";
      let district = "";
      let districtId = "";

      if (value[2] && value[2].code) {
        district = value[2].text;
        districtId = value[2].id;
      }
      if (value[1] && value[1].code) {
        city = value[1].text;
        cityId = value[1].id;
      }
      if (value[0] && value[0].code) {
        province = value[0].text;
        provinceId = value[0].id;
      }
      this.$store.commit("setAccountArea2", {
        acconutArea2: [provinceId, cityId, districtId],
        acconutArea2Text: province + city + district,
      });
      this.formData.acconutArea2Text = province + city + district;
      this.$store.commit("setBranchBankId2", {
        bankName: "",
        id: "",
      });
      this.formData.branchBankId2Text = "";
      this.show5 = false;
    },
    selectBank1(data, index) {
      this.formData.bankId1 = data.value;
      this.formData.bankId1Text = data.text;
      this.$store.commit("setBankId1", data);
      this.$store.commit("setBranchBankId1", {
        bankName: "",
        id: "",
      });
      this.formData.branchBankId1text = "";
      this.show2 = false;
    },
    selectBank2(data, index) {
      this.formData.bankId2 = data.value;
      this.formData.bankId2Text = data.text;
      this.$store.commit("setBankId2", data);
      this.$store.commit("setBranchBankId2", {
        bankName: "",
        id: "",
      });
      this.formData.branchBankId2Text = "";
      this.show3 = false;
    },
    getBankLists() {
      getBankList().then((res) => {
        if (res.code == 200) {
          let bankList = res.data;
          let newBankList = [];
          bankList.forEach((i) => {
            newBankList.push({
              text: i.bankName,
              value: i.id,
            });
          });
          this.bankList = newBankList;
        }
      });
    },
    change1(val) {
      this.$store.commit("ISetAccountName1", val); //公户户名
    },
    change2(val) {
      if (val.length > 25) {
        this.$store.commit("ISetAccountNum1", ""); //公户号码
      } else {
        this.$store.commit("ISetAccountNum1", val); //公户号码
      }
    },
    change3(val) {
      if (!/^0?(13|14|15|16|17|18|19)[0-9]{9}$/.test(val)) {
        this.$store.commit("ISetAccountMobile1", ""); //公户开户手机
      } else {
        this.$store.commit("ISetAccountMobile1", val); //公户开户手机
      }
    },
    change4(val) {
      if (!/^[\u4E00-\u9fa5a-zA-Z\uf900-\ufa2d·s]{1,225}$/.test(val)) {
        this.$store.commit("ISetSettlementName", ""); //结算人姓名
      } else {
        this.$store.commit("ISetSettlementName", val); //结算人姓名
      }
    },
    change5(val) {
      if (!/^[0-9a-zA-Z]{1,18}$/.test(val)) {
        this.$store.commit("ISetSettlementNum", ""); //结算人证件号
      } else {
        this.$store.commit("ISetSettlementNum", val); //结算人证件号
      }
    },
    change6(val) {
      this.$store.commit("ISetAccountName2", val); //私户户名
    },
    change7(val) {
      if (val.length > 25) {
        this.$store.commit("ISetAccountNum2", ""); //私户号码
      } else {
        this.$store.commit("ISetAccountNum2", val); //私户号码
      }
    },
    change8(val) {
      if (!/^0?(13|14|15|16|17|18|19)[0-9]{9}$/.test(val)) {
        this.$store.commit("ISetAccountMobile2", ""); //私户开户手机
      } else {
        this.$store.commit("ISetAccountMobile2", val); //私户开户手机
      }
    },
    change9(val) {
      this.$store.commit("ISetCheckApproveNo", val); //核准号
    },
    onOversize() {
      this.$toast("图片过大无法上传\n请上传10MB以内的图片！");
    },
    // 银行卡正面
    deleteBankCardImg() {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.bankCardList = [];
          this.$store.commit("PSetBankCardImg", "");
        });
    },
    uploadBankCardImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.bankCardList = [];
          this.$store.commit("PSetBankCardImg", "");
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              bankFontOcr(link)
                .then((result) => {
                  if (!result.bankInfo) {
                    file.status = "done";
                    // file.message = "OCR识别失败";
                    this.bankCardList = [];
                    this.bankCardList.push({
                      url: link,
                    });
                    this.$store.commit("PSetBankCardImg", link);
                  } else {
                    file.status = "done";
                    this.formData.accountNum2 = result.cardNo;
                    this.change7(result.cardNo);
                    this.bankCardList = [];
                    this.bankCardList.push({
                      url: link,
                    });
                    this.$store.commit("PSetBankCardImg", link);
                  }
                })
                .catch((error) => {
                  file.status = "done";
                  this.bankCardList = [];
                  this.bankCardList.push({
                    url: link,
                  });
                  this.$store.commit("PSetBankCardImg", link);
                  //   file.message = "OCR识别失败";
                });
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    //银行卡反面
    uploadBankCard2Img(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.bankCard2List = [];
          this.$store.commit("PSetBankCard2Img", "");
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              bankFontOcr(link)
                .then((result) => {
                  if (!result.bankInfo) {
                    file.status = "done";
                    // file.message = "OCR识别失败";
                    this.bankCard2List = [];
                    this.bankCard2List.push({
                      url: link,
                    });
                    this.$store.commit("PSetBankCard2Img", link);
                  } else {
                    file.status = "done";
                    this.formData.accountNum2 = result.cardNo;
                    this.change7(result.cardNo);
                    this.bankCard2List = [];
                    this.bankCard2List.push({
                      url: link,
                    });
                    this.$store.commit("PSetBankCard2Img", link);
                  }
                })
                .catch((error) => {
                  file.status = "done";
                  this.bankCard2List = [];
                  this.bankCard2List.push({
                    url: link,
                  });
                  this.$store.commit("PSetBankCard2Img", link);
                  //   file.message = "OCR识别失败";
                });
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    // 银行卡反面
    deleteBankCard2Img() {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.bankCard2List = [];
          this.$store.commit("PSetBankCard2Img", "");
        });
    },
    // 结算户身份证反面
    deleteSettleBackImg() {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.settleBackList = [];
          this.$store.commit("PSetSettleBackImg", "");
        });
    },
    uploadSettleBackImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.settleBackList = [];
          this.$store.commit("PSetSettleBackImg", "");
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              idCardOcr(link)
                .then((result) => {
                  if (result.nation) {
                    file.status = "done";
                    // file.message = "OCR识别失败";
                    this.settleBackList = [];
                    this.settleBackList.push({
                      url: link,
                    });
                    this.$store.commit("PSetSettleBackImg", link);
                  } else {
                    file.status = "done";
                    let arr = result.validDate.split("-");
                    let start = arr[0].replace(/\./g, "/");
                    let end =
                      arr[1] == "长期"
                        ? "88888888"
                        : arr[1].replace(/\./g, "/");
                    this.formData.idCardStartTime = start;
                    this.formData.idCardEndTime = end;
                    this.$store.commit("setIdCardStartTime", start);
                    this.$store.commit("setIdCardEndTime", end);

                    this.settleBackList = [];
                    this.settleBackList.push({
                      url: link,
                    });
                    this.$store.commit("PSetSettleBackImg", link);
                  }
                })
                .catch((error) => {
                  file.status = "done";
                  //   file.message = "OCR识别失败";
                  this.settleBackList = [];
                  this.settleBackList.push({
                    url: link,
                  });
                  this.$store.commit("PSetSettleBackImg", link);
                });
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    // 结算户身份证正面
    deleteSettleFontImg() {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.settleFontList = [];
          this.$store.commit("PSetSettleFontImg", "");
        });
    },
    uploadSettleFontImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.settleFontList = [];
          this.$store.commit("PSetSettleFontImg", "");
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              idCardOcr(link)
                .then((result) => {
                  if (!result.nation) {
                    file.status = "done";
                    // file.message = "OCR识别失败";
                    this.settleFontList = [];
                    this.settleFontList.push({
                      url: link,
                    });
                    this.$store.commit("PSetSettleFontImg", link);
                  } else {
                    file.status = "done";
                    this.formData.settlementName = result.name;
                    this.formData.settlementNum = result.idNum;
                    this.change4(result.name);
                    this.change5(result.idNum);
                    this.settleFontList = [];
                    this.settleFontList.push({
                      url: link,
                    });
                    this.$store.commit("PSetSettleFontImg", link);
                  }
                })
                .catch((error) => {
                  file.status = "done";
                  //   file.message = "OCR识别失败";
                  this.settleFontList = [];
                  this.settleFontList.push({
                    url: link,
                  });
                  this.$store.commit("PSetSettleFontImg", link);
                });
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    //加结算人手持身份证照
    uploadSettleHandFontImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.settleHandFontList = [];
          this.$store.commit("PSetSettleHandFontImg", "");
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              this.settleHandFontList = [];
              this.settleHandFontList.push({
                url: link,
              });
              this.$store.commit("PSetSettleHandFontImg", link);
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    deleteSettleHandFontImg() {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.settleHandFontList = [];
          this.$store.commit("PSetSettleHandFontImg", "");
        });
    },
    // 开户许可证
    deleteOpenPermisionImg() {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.openPermissionList = [];
          this.$store.commit("PSetOpenPermissionImg", "");
        });
    },
    uploadOpenPermisionImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.openPermissionList = [];
          this.$store.commit("PSetOpenPermissionImg", "");
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              file.status = "done";
              this.openPermissionList = [];
              this.openPermissionList.push({ url: link });
              this.$store.commit("PSetOpenPermissionImg", link);
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    selectBranchbank1() {
      this.$router.push({
        path: "/selectbank1",
      });
    },
    selectBranchbank2() {
      this.$router.push({
        path: "/selectbank2",
      });
    },
    lookExample(url) {
      this.exampleImg = url;
      this.showExample = true;
    },
    lookExample1(url) {
      this.exampleImg = url;
      this.showExample1 = true;
    },
    goBack() {
      this.$router.push({
        path: "/step1",
      });
    },
    selectAccountTyepe(data, index) {
      this.formData.accountTypeText = data.text;
      this.formData.accountType = data.value;
      this.$store.commit("setAccountType", data);
      if (data.value == 1) {
        this.$store.commit(
          "ISetAccountName1",
          this.merchantForm.merchantFullName
        );
      } else if (data.value == 2) {
        this.$store.commit(
          "ISetAccountName1",
          this.merchantForm.merchantFullName
        );
        this.$store.commit("ISetAccountName2", this.merchantForm.legalName);
      }
      this.show1 = false;
    },
    onCancel(e) {
      this[`show${e}`] = false;
    },
    showPopup(e) {
      if (e == 7 && !this.formData.idCardStartTime) {
        this.$toast("请先选择开始日期");
        return false;
      }
      this[`show${e}`] = true;
    },
    nextStep() {
      const reg = /^[1-9]\d{3}\/(0[1-9]|1[0-2])\/(0[1-9]|[1,2][0-9]|3[0,1])$/;
      if (this.formData.accountType == 3) {
        if (!reg.test(this.formData.idCardStartTime)) {
          this.$toast({
            message: "身份证开始有效期格式不对，请重新选择",
            duration: 2000,
          });
          return false;
        }
        if (this.formData.idCardEndTime != "88888888") {
          if (!reg.test(this.formData.idCardEndTime)) {
            this.$toast({
              message: "身份证结束有效期格式不对，请重新选择",
              duration: 2000,
            });
            return false;
          }
        }
      }

      this.$router.push({
        path: "/step3",
      });
    },
    handlePersonVerify() {
      if (
        /^[0-9a-zA-Z]{1,18}$/.test(this.formData.settlementNum) &&
        this.formData.settlementNum.length == 18
      ) {
        isBlacklist(this.formData.settlementNum).then(({ data }) => {
          if (data.isBlacklist) {
            let msg = data.consumerHotline
              ? `结算人证件号填写失败，代码1000，请联系客服${data.consumerHotline}`
              : `结算人证件号填写失败，代码1000`;
            this.$toast(msg);
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="less">
.content-box {
  min-height: 800px;
}
/deep/.van-picker-column__item--selected {
  color: #ff9600 !important;
}
/deep/.van-picker__confirm {
  color: #ff9600 !important;
}
/deep/.van-field__label {
  color: #323233;
}
/deep/.van-dialog__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 57px 0;
}
/deep/.van-uploader {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__wrapper {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview-image {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview {
  width: 334px;
  height: 224px;
}
img {
  width: 334px;
  height: 224px;
}
.next-step-btn {
  width: 80%;
  margin: 100px auto;
}
.app {
  background: #f9f9f9;
}
.content-box {
  background: #f9f9f9;
  padding-bottom: 1px;
  box-sizing: border-box;
  padding-top: 110px;
}

.mt-margin {
  margin-top: 24px;
}
.example-img {
  width: 420px;
  height: 270px;
}
.example-img1 {
  width: 420px;
  height: 60vh;
}
.attach-item {
  margin-top: 24px;
  background: #fff;
  padding: 35px 32px;
  p.attach-item-title {
    font-size: 30px;
    font-weight: 400;
    color: #131313;
  }

  .upload-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .attach-label {
      width: 45%;
      padding-left: 5px;
    }
    .upload-item {
      margin-top: 20px;
    }
    p {
      font-size: 28px;
      font-weight: 400;
      color: #131313;
      margin: 12px 0;
      text-align: center;
      opacity: 0.8;
    }
    .example {
      display: flex;
      align-items: center;
      color: #ffb72f;
      justify-content: center;
    }
  }
}
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  border-bottom: 1px solid #d7d7d7;
  font-size: 36px;
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  .header-item {
    font-weight: 500;
    color: #131313;
  }
  .header-save {
    color: #ffb72f;
    font-size: 28px;
  }
}
</style>
